<!-- 
#    
# Writing is an in-browser text editor, supporting LaTeX (MathJax) and Markdown, designed to be lightweight and, unlike some other similar solutions, 
#           fast to display (no delay when writing, no flickering when writing math), as close as possible to the math.stackexchange.com editor.
# 
# author:   Joseph Ernest (twitter: @JosephErnest)
# url:      https://github.com/josephernest/writing
# license:  MIT license
# based on: Pagedown (https://code.google.com/archive/p/pagedown/, https://github.com/balpha/pagedown)
#           Pagedown Extra (https://github.com/jmcmanus/pagedown-extra)
#           MathJax (https://www.mathjax.org/)
#           StackOverflow's editor (https://gist.github.com/gdalgas/a652bce3a173ddc59f66)
#
-->

<!DOCTYPE html>
<html class="fixedheight texroman">
<head>
<link rel="icon" href="favicon.ico" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
<title>Writing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
@font-face { font-family: texroman; src: url(cmunrm.otf); font-weight: 400; font-style: normal; font-stretch: normal; }
@font-face { font-family: texroman; src: url(cmunrb.otf); font-weight: 700; font-style: normal; font-stretch: normal; }

html { font-family: sans-serif; }
* { margin: 0; padding: 0; border: 0; outline: 0; }
.texroman { font-family: texroman !important; }    
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.fixedheight { height: 100%; }
.column { padding: 20px; }
#wmd-button-bar { display: none; }
#wmd-input { float: left; box-sizing: border-box; width: 50%; resize: horizontal; font-size: 14px; border-right: 1px solid #ddd; height: 100%; overflow: y-scroll; }
#wmd-preview { overflow-y: auto; overflow-x: hidden; font-size: 15px; height: 100%; box-sizing: border-box; min-height: 100vh; }
#wmd-preview li { margin-left: 20px; }
#wmd-preview code, #wmd-input { font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif; }
#wmd-preview p code, #wmd-preview li code { background-color: #f5f5f5; white-space: pre-wrap; padding: 3px 5px; font-size: 13px; }
#wmd-preview pre { background-color: #f5f5f5; padding: 5px; margin: 0.5em 0 1em; overflow-x: auto; word-wrap: normal; font-size: 13px; }
#wmd-preview blockquote { background-color: #defcff; padding: 10px; margin: 0.5em 0 1em; overflow-x: auto; word-wrap: normal; border-left: 2px solid #0ae2f5; }
#wmd-preview blockquote p { margin-bottom: 0; }
#wmd-preview hr { background-color: #ddd; color: #ddd; height: 1px; margin-bottom: 15px; margin-top: 15px; }
#wmd-preview h1 { margin-bottom: 0.5em; font-size: 1.4em; }
#wmd-preview h2 { margin-bottom: 0.5em; font-size: 1.2em; }
#wmd-preview h3 { margin-bottom: 0.5em; font-size: 1em; }
#wmd-preview p { margin-bottom: 1em; line-height: 1.25; }
#wmd-preview ul { margin-bottom: 1.5em; line-height: 1.25; }
#wmd-preview img { max-width: 100%; max-height: 100%; }
#wmd-preview table { display: block; width: 100%; overflow: auto; border-collapse: collapse; margin-bottom: 0.5em; }
#wmd-preview table th { font-weight: bold; }
#wmd-preview table th, #wmd-preview table td { padding: 6px 13px; border: 1px solid #ddd; }
#wmd-preview table tr { background-color: #fff; border-top: 1px solid #ccc; }
#wmd-preview table tr:nth-child(2n) { background-color: #f8f8f8; }
#wmd-preview a { text-decoration: none; color: #07c; }
#wmd-preview .pagebreak { border-bottom: 1px dashed #eee; padding-top: 20px; margin-bottom: 30px; }
#helpicon { position: absolute; bottom: 0; left: 0; margin: 5px; color: #ccc; cursor: pointer; font-family: sans-serif;  font-size: 15px; }
#help { display: none; position: fixed; top: 10%; height: 70%; left: 25%; max-width: 50%; overflow: hidden; background-color: white; border: 1px solid #ccc; padding: 15px 30px 20px 30px; overflow-y: auto; }
#help pre {  word-wrap: break-word !important; white-space: pre-wrap !important; }
#closeicon { position: fixed; top: 10%; left: 25%; margin: 5px 8px; color: #ccc; cursor: pointer; font-family: sans-serif; }
#openFileInput { 
    display: inline-block;
    border-radius: 2px;
    background-color: #f4511e;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 16px;
    padding: 10px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px; 
    box-shadow: 0 9px #999;
}

#openFileInput:active {
    background-color: #f4511e;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

@media print { 
    #helpicon { display: none; } 
    #wmd-preview .pagebreak { opacity: 0; }
}

.dark-mode #wmd-input, .dark-mode #wmd-preview  { background-color: #212121; color: #FAFAFA; border-color: #757575;}
.dark-mode #wmd-preview a, .dark-mode #help a, .dark-mode .wmd-prompt-dialog a { color: #90CAF9; }
.dark-mode #wmd-preview p code, .dark-mode #wmd-preview li code, .dark-mode #wmd-preview pre { background-color: #424242; }
.dark-mode #wmd-preview table th, .dark-mode #wmd-preview table td { border-color: #757575; }
.dark-mode #wmd-preview table tr { background-color: #424242; border-color: #757575; }
.dark-mode #help { background-color: #424242; border-color: #757575; color: #FAFAFA; }
.dark-mode .wmd-prompt-dialog { background-color: #424242; color: #FAFAFA; }
.dark-mode .wmd-prompt-dialog input { background-color: #212121; color: #FAFAFA; }
.dark-mode #wmd-preview blockquote { background-color: #00796B; border-color: #004D40; }

</style>

</head>
<body class="fixedheight">
<script type="text/javascript" src="Markdown.Converter.js"></script>
<script type="text/javascript" src="Markdown.Sanitizer.js"></script>
<script type="text/javascript" src="Markdown.Editor.js"></script>
<script type="text/javascript" src="Markdown.Extra.js"></script>
<script type="text/javascript" src="MathJax.js?config=TEX-AMS_HTML-full"></script>
<script type="text/javascript" src="mathjax-editing_writing.js"></script>
<!-- <script type="text/javascript" src="jspdf.min.js"></script> -->
<script src="jquery.min.js"></script>
<!-- <button id="openFileInput" type="file" style="vertical-align:middle"><span>打开文件</span></button> -->
<input id="openFileInput" type="file" accept=".md, .tex" />
<div id="wmd-button-bar" class="wmd-button-bar"></div>
<textarea id="wmd-input" class="column wmd-input" spellcheck="false"></textarea>
<div id="wmd-preview" class="column wmd-preview">
<noscript>This text editor requires JavaScript.</noscript>
</div>
<div id="helpicon" class="unselectable">?</div>
<div id="help">
<div id="closeicon" class="unselectable">X</div>    
<pre>    
<a href="https://github.com/josephernest/writing">Writing</a> is a lightweight distraction-free text editor.
Write text on the left, and the result is displayed on the right.

Commands
--------
CTRL + D: toggle display mode (editor only, preview only or both-at-the-same-time)
CTRL + P: print or export as PDF
CTRL + S: save source code as .MD file
CTRL + SHIFT + O: open .MD file

CTRL + SHIFT + L: enable / disable LaTeX (i.e. math formulas)
CTRL + SHIFT + D: toggle dark mode
CTRL + SHIFT + R: toggle roman (LaTex-like) or sans-serif font
CTRL + SHIFT + H: show this help dialog

F11: full-screen (in most browsers)

Markdown syntax
---------------
#Title
##Subtitle
This is *italic* and this is **bold**.
This is a [link](http://www.example.com/) and this is an ![image](imagelink.jpg).
Write code with `...` or by adding a 4-whitespace indent to the paragraph.
> This is a quote.

LaTeX syntax
------------
This formula $x^2+1$ will be displayed inline.
This formula $$x^2+1$$ will be displayed in a new paragraph.

Specific syntax
---------------
\pagebreak will trigger a pagebreak when printing / exporting to PDF.

About
-----
Made by <a href="https://twitter.com/JosephErnest">@JosephErnest</a>
<a href="https://github.com/josephernest/writing">https://github.com/josephernest/writing</a>
Uses <a href="https://code.google.com/archive/p/pagedown/">Pagedown</a>, <a href="https://github.com/jmcmanus/pagedown-extra">Pagedown Extra</a>, <a href="https://www.mathjax.org/">MathJax</a>, StackOverflow's <a href="https://gist.github.com/gdalgas/a652bce3a173ddc59f66">editor</a> code and the <a href="http://cm-unicode.sourceforge.net/">Computer Modern</a> font.
</pre>    
</div>

<script type="text/javascript">
togglemathjax = function(enabled) {
    if (enabled) {
        if (!latexenabledonce)
        {
            MathJax.Hub.Config(
{"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic: true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
 tex2jax: { inlineMath: [ ["$", "$"], ["\\\\(","\\\\)"] ], displayMath: [ ["$$","$$"], ["\\[", "\\]"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno" },
 TeX: {  noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } },
 messageStyle: "none", skipStartupTypeset: true });
            mjpd1.mathjaxEditing.prepareWmdForMathJax(editor, '', [["$", "$"]]);
            latexenabledonce = true;
            if (editor.refreshPreview !== undefined){
                editor.refreshPreview();
                $("#wmd-preview").scrollTop($("#wmd-preview")[0].scrollHeight);
            }
        }
        else {
            MathJax.Hub.queue.pending = 0;
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "wmd-preview"]);
            $("#wmd-preview").scrollTop($("#wmd-preview")[0].scrollHeight);
        }
    }
    else {
        MathJax.Hub.queue.pending = 1; 
        if (editor.refreshPreview !== undefined){
            editor.refreshPreview();
            $("#wmd-preview").scrollTop($("#wmd-preview")[0].scrollHeight);
        }
        else {
           MathJax.Hub.Config({ skipStartupTypeset: true });
           $("#wmd-preview").scrollTop($("#wmd-preview")[0].scrollHeight);
        }
    }
}

toggledarkmode = function(enabled){
    $('body').toggleClass('dark-mode',enabled);
}

if (localStorage.getItem("writing") !== null) {
    $('#wmd-input').val(localStorage.getItem("writing"));
}
    
openFile = function(e) {         
  readFile(e.target.files[0]);
}

readFile = function(file){ // https://stackoverflow.com/a/26298948/1422096
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    $('#wmd-input').val(contents);        // display file content
    editor.refreshPreview();
    $("#wmd-preview").scrollTop($("#wmd-preview")[0].scrollHeight);
  };
  reader.readAsText(file);
}

document.getElementById('openFileInput').addEventListener('change', openFile, false);

$('body').on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
  })
  .on('drop', function(e) {
    readFile(e.originalEvent.dataTransfer.files[0]);
});

$('#wmd-input').on('input', function() {
    localStorage.setItem("writing", $('#wmd-input').val());
});

$('#wmd-input').bind('input propertychange', function(){  
    $("#wmd-preview").scrollTop($("#wmd-preview")[0].scrollHeight);
});  


$('#wmd-input').focus();

$('#helpicon').click(function() {
    $('#help').show();
});

$('#closeicon, #wmd-input, #wmd-preview').click(function() {
    $('#help').hide();
    $("#wmd-preview").scrollTop($("#wmd-preview")[0].scrollHeight);
});

$(document).on('keydown', function(e) {
    if (e.keyCode == 80 && (e.ctrlKey || e.metaKey)) {    // CTRL + P 
        if (mode != 1) {
            mode = 1;
            $('#wmd-input').hide();
            $('#wmd-preview').show();
            $('#openFileInput').hide();
            $('body').removeClass('fixedheight');
            $('html').removeClass('fixedheight');
            toggledarkmode(false);
            e.preventDefault();
            window.print();
            toggledarkmode(darkmodeenabled);
            return false;
        }
        //var doc = new jsPDF();
        //var specialElementHandlers = {'#editor': function (element, renderer) { return true; } };
        //doc.fromHTML($('#wmd-preview').html(), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers });
        //doc.save('file.pdf');
        /*var restorepage = $('body').html();
        var printcontent = $('#wmd-preview').clone();
        $('body').empty().html(printcontent);
        window.print();
        $('body').html(restorepage);
        e.preventDefault();
        return false;*/
    }
    else if (e.keyCode == 69 && (e.ctrlKey || e.metaKey)){
        $("#wmd-preview").scrollTop($("#wmd-preview")[0].scrollHeight);
        return false;
    }
    else if (e.keyCode == 83 && (e.ctrlKey || e.metaKey)) {    // CTRL + S
        var blob = new Blob([$('#wmd-input').val()], {type: 'text'});     // https://stackoverflow.com/a/33542499/1422096
        if (window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveBlob(blob, 'newfile.md');
        }
        else {
            var elem = window.document.createElement('a');
            elem.href = window.URL.createObjectURL(blob);
            elem.download = 'newfile.md';        
            document.body.appendChild(elem);
            elem.click();        
            document.body.removeChild(elem);
        }
        e.preventDefault();
        return false;
    }
    else if (e.keyCode == 68 && (e.ctrlKey || e.metaKey) && !e.shiftKey) {    // CTRL + D
        mode += 1; if (mode == 3) mode = 0;
        $('#openFileInput').show();
        if (mode == 1) {
            $('#wmd-input').hide();
            $('#wmd-preview').show();
            $('body').removeClass('fixedheight');
            $('html').removeClass('fixedheight');
        }
        else if (mode == 2) {
            $('#wmd-preview').hide();            
            $('#wmd-input').show().css('float', 'none').css('width', '100%').focus();
            $('body').addClass('fixedheight');
            $('html').addClass('fixedheight');
        }
        else {
            $('#wmd-input').show().css('float', 'left').css('width', '50%').focus();
            $('#wmd-preview').show();
        }
        e.preventDefault();
        return false;
    }        
    else if (e.keyCode == 72 && (e.ctrlKey || e.metaKey) && e.shiftKey) {    // CTRL + H
        $('#help').show();
        e.preventDefault();
        return false;
    }
    else if (e.keyCode == 68 && (e.ctrlKey || e.metaKey) && e.shiftKey) {    // CTRL + SHIFT + D
      darkmodeenabled = !darkmodeenabled;
      localStorage.setItem("darkmode", darkmodeenabled ? "1" : "0");
      toggledarkmode(darkmodeenabled);
      e.preventDefault();
      return false;
    }    
    else if (e.keyCode == 82 && (e.ctrlKey || e.metaKey) && e.shiftKey) {    // CTRL + SHIFT + R
        $('html').toggleClass('texroman');
        e.preventDefault();
        return false;
    }    
    else if (e.keyCode == 76 && (e.ctrlKey || e.metaKey) && e.shiftKey) {    // CTRL + SHIFT + L 
        latexenabled = !latexenabled;
        localStorage.setItem("latex", latexenabled ? "1" : "0");
        togglemathjax(latexenabled);
        e.preventDefault();
        return false;
    }
    else if (e.keyCode == 79 && (e.ctrlKey || e.metaKey) && e.shiftKey) {    // CTRL + SHIFT + O
        $('#openFileInput').click();
        e.preventDefault();
        return false;
    } 
    else if (e.keyCode == 27)  { // ESC
        $('#help').hide();
    }
});

var mode = 0;
var latexenabledonce = false;
var latexenabled = localStorage.getItem("latex") !== "0";
var darkmodeenabled = localStorage.getItem("darkmode") == "1";
var converter = Markdown.getSanitizingConverter();
Markdown.Extra.init(converter);
var editor = new Markdown.Editor(converter, '');
var mjpd1 = new mjpd();
togglemathjax(latexenabled);
toggledarkmode(darkmodeenabled);
editor.run();
</script>
</body>
</html>
